<template>
	<view>
		<uni-nav-bar left-icon="left" rightIcon="plusempty" :title="title" backgroundColor="#3a408c" shadow color="#fff"
			@clickLeft="goReturn" @clickRight="addGroup" @clickTitle="editTitle" />

		<view class="search-bar">
			<uni-search-bar radius="5" placeholder="搜索" clearButton="auto" cancelButton="auto" @confirm="search" />
		</view>


		<view class="invite">
			<uni-list>
				<uni-list-item title="邀请成员加入" showArrow thumb="/static/邀请.png" thumb-size="lg" />
			</uni-list>
		</view>


		<uni-collapse>
			<!-- 	列表循环 -->
			<uni-collapse-item title="学生列表" :show-animation="true">
				<view class="content">

					<uni-list :border="true" v-for="item in studentList" :key="item.id">
						<!-- 显示圆形头像 -->
						<uni-list-chat :avatar-circle="true" :title="item.sname" :avatar="item.image" note="您收到一条新的消息"
							:time="item.create_time"></uni-list-chat>
						<!-- 右侧带角标 -->
					</uni-list>

				</view>
			</uni-collapse-item>
		</uni-collapse>

		<uni-popup ref="popup" type="bottom" background-color="#fff">
			<view class="box" @click="jumpSignIn">
				<image src="../../static/打卡.png" mode=""></image>
				<view class="">
					考勤打卡
				</view>
			</view>
			<view class="box" @click="jumpRandom">
				<image src="../../static/实时点名.png" mode=""></image>
				<view class="">
					随机点名
				</view>
			</view>
			<view class="box" @click="jumpHomework">
				<image src="../../static/发布.png" mode=""></image>
				<view class="">
					发布作业
				</view>
			</view>
			<view class="box">
				<image src="../../static/通知.png" mode=""></image>
				<view class="">
					发布通知
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="jumpTitle" type="center" :mask-click="false" background-color="#fff">
			<view class="title-box">
				<view class="title">
					请输入班级名
				</view>
				<input type="text" v-model="title">
				<button type="primary" @click="titleSubmit">提交</button>
				<button type="default" @click="qx">取消</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import server from "@/util/http.js"
	export default {
		data() {
			return {
				studentList: [],
				title: '',
				classId: '',
			}
		},
		methods: {
			qx() {
				this.$refs.jumpTitle.close();
				this.request();
			},
			editTitle() {
				this.$refs.jumpTitle.open('center');
			},
			requestStudent() {
				server({
					url: 'http://127.0.0.1:4523/mock/906666/class',
					method: 'get',
					success: res => {
						this.studentList = res.data[0].student;
						setTimeout(() => {
							console.clear();
						}, 1000)

					}
				})
			},
			titleSubmit() {
				server({
					url: 'http://101.43.227.220:3003/teacher/onlineClass/updateClassName',
					method: 'post',
					data: {
						id: this.classId,
						className: this.title
					},
					success: res => {
						uni.showToast({
							title: '成功',
							duration: 1000
						})
						this.$refs.jumpTitle.close();
					}
				})
			},
			jumpSignIn() {
				uni.navigateTo({
					url: '../signIn/signIn?className=' + this.title
				})
			},
			jumpRandom() {
				uni.navigateTo({
					url: '../random/random'
				})
			},
			jumpHomework() {
				uni.navigateTo({
					url: '../homework/homework?id=' + this.classId
				})
			},

			//搜索 调用接口 根据姓名搜索学生信息
			search(e) {
				let m = e.value;
				if (m !== '') {
					let arr = this.studentList.filter(value => value.sname.includes(m));
					this.studentList = arr;
				} else {
					this.requestStudent();
				}
			},
			goReturn() {
				uni.navigateBack({
					delta: 1
				})
			},
			//新建任务
			addGroup() {
				this.$refs.popup.open('bottom');
			},
			//请求数据
			request() {
				server({
					url: `http://101.43.227.220:3003/teacher/onlineClass/selectById?id=${this.classId}`,
					method: 'post',
					success: res => {
						this.title = res.data.className
					},
					fail: e => {
						console.log(e);
					}
				});
			}
		},
		//页面加载调用接口 根据class页面传来的id 查询  显示班级名 课程名 学生信息（姓名 原始班级 联系方式 头像 等 ）
		onLoad(option) {
			this.classId = option.id;
			this.request();
			this.requestStudent();

		},
		//页面下拉刷新重新加载数据
		onPullDownRefresh() {
			this.request();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 500)

		}
	}
</script>

<style scoped>
	.title {
		text-align: center;
		font-size: 20px;
	}

	.title-box input {
		border: 1px solid lightgray;
		padding: 5px 5px;
		font-size: 20px;
		width: 85%;
		margin: 10px auto;
		border-radius: 10px;
	}

	.title-box button {
		width: 85%;
		margin-top: 10px;
	}

	>>>.uni-popup .uni-popup__wrapper {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-around;
		padding: 20rpx 0px 20rpx 0px;
	}

	>>>.uni-nav-bar-text {
		font-size: 34rpx;
		font-weight: 600;
	}

	.box {
		text-align: center;
		padding: 20rpx 0px 20rpx 0px;
		font-size: 28rpx;
		font-weight: 600;
	}

	.box view {
		margin-top: 10rpx;
	}

	.box image {
		width: 80rpx;
		height: 80rpx;
	}
</style>
